﻿<html>
<head>
<title>CSS3 Border Image Test</title>

<style type="text/css">
body {border-image: tile(nist.gif, 10%, 10%, 10%, 10%) repeat stretch; border-style: solid;}
p {border-image: tile("ovalbbut.gif", 50%, 50%, 50%, 50%) repeat-x; border-style: solid;
  }
h3 {border-image: tile("nist.gif", 15%, 50%, 15%, 50%) repeat-y; border-style: solid;}
h4 {border-image: tile("ovalbbut.gif", 25%, 25%, 25%, 25%) stretch repeat; border-style: solid;}
em {border-image: tile("flagbg.gif", 40%, 40%, 40%, 40%) stretch no-repeat; border-style: solid;}
</style>
</head>

<body>




<h1>CSS3 Border-Image Test</h1>





<ul>
<li >
For "border-image", possible values are "tile repeat? | repeat? tile | none"
</li>
</ul>
<h2>
PASS CRITERIA:
</h2>
NOTE: This property may not be implemented yet.
<p>
If statement above is true, this paragraph should have a border-image of
tile(ovalbbut.gif, 50%, 50%, 50%, 50%) repeat-x.
The rule applied is "p {border-image: tile(ovalbbut.gif, 50%, 50%, 50%, 50%) repeat-x; }".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</p>
<h3>
The border-image of this h3 heading should be h3 tile(nist.gif, 15%, 50%, 15%, 50%) repeat-y;.  
The rule applied is "h3 {border-image: tile(nist.gif, 15%, 50%, 15%, 50%) stretch 28px green;}}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h3>
<h4>
The border-image of this h4 heading should be tile(ovalbbut.gif, 25%, 25%, 25%, 25%) stretch repeat.
The rule applied is "h4 {border-image: tile(ovalbbut.gif, 25%, 25%, 25%, 25%) stretch repeat;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h4>
<em>
This emphasized test should have a border-image of tile(flagbg.gif, 40%, 40%, 40%, 40%) stretch no-repeat.
The rule applied is "em {thingy background-and-border: tile(flagbg.gif, 40%, 40%, 40%, 40%) stretch no-repeat;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</em>
<p>
All other properties of this page should be UA-default.
This is a paragraph, like the one above, so should have the same
border-image set. The body's border-image of tile(nist.gif, 10%, 10%, 10%, 10%) repeat stretch  
should display,
since the rule "body {border-image: tile(nist.gif, 10%, 10%, 10%, 10%) repeat stretch;}" applies. 
Border-style of solid is applied to all rules, so that if the specified image is unavailable a
solid border will appear. 
</p>

</body>
</html>
